<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar" title="首页" fixed />
    <van-cell-group>
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        align="center"
        round
        to="/search"
        icon="search"
        fixed
        >商品搜索 款好物</van-button
      >
    </van-cell-group>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(obj, index) in advertiseList" :key="index">
        <img  :src="obj.pic"  class="banner-img"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 品牌推荐 -->
    <div>
      <van-cell is-link to="/brand">
        <b slot="title">品牌制造商直供</b>
        <p>更多推荐</p>
      </van-cell>
      <van-grid :border="false" :column-num="3" class="brandList">
        <van-grid-item
          v-for="(obj, index) in brandList"
          :key="index"
          class="item"
          :to="'/brand/detail?id='+obj.id"
        >
          <span class="text">{{ obj.name }}</span>
          <van-image :src="obj.bigPic || obj.logo" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 秒杀专区 -->
    <div>
      <van-cell arrow>
        <b slot="title"></b>
        <div slot="title">
          <p><b>秒杀专区</b></p>
          <p>下一场 {{ homeFlashPromotion.nextStartTime }}开始</p>
        </div>
        <div>
          <p>本次剩余结束</p>
          <van-count-down :time="3600" />
        </div>
      </van-cell>
      <van-grid :border="false" :column-num="2" v-if="homeFlashPromotion.startTime" class="newGoodsList">
        <van-grid-item
          v-for="(obj, index) in homeFlashPromotion.productList"
          :key="index"
          :to="'/goods/detail?id='+obj.id"
          class="item"
        >
          <van-image :src="obj.pic" />
          <span class="text">{{ obj.name }}</span>
          <span class="price">￥{{ obj.flashPromotionPrice }}  <s>{{obj.originalPrice}}</s></span>
        </van-grid-item>
      </van-grid>
    </div>
     <!--新鲜好物 -->
    <div>
       <van-cell is-link to="/goods/new">
        <b slot="title">新鲜好物</b>
        <p>更多推荐</p>
      </van-cell>
      <van-grid :border="false" :column-num="2" class="newGoodsList">
        <van-grid-item
          v-for="(obj, index) in newProductList"
          :key="index"
          class="item"
          :to="'/goods/detail?id='+obj.id"
    
        >
          <van-image :src="obj.pic" />
          <span class="text">{{ obj.name }}</span>
          <span class="price">￥{{ obj.price }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!--人气推荐 -->
    <div>
       <van-cell is-link to="/goods/hot">
        <b slot="title">人气推荐</b>
        <p>更多推荐</p>
      </van-cell>
      <div class="hotGoodsList">
        <div
          v-for="(obj, index) in hotProductList"
          :key="index"
          class="item"
        >
          <img class="pic" :src="obj.pic" />
          <div class="textbox">
            <div class="text">{{ obj.name }}</div>
            <div class="brief">{{ obj.subTitle }}</div>
            <div class="price">￥{{ obj.price }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专题精选 -->
    <div>
      <van-cell is-link>
        <b slot="title">专题精选</b>
        <p>更多推荐</p>
      </van-cell>
      <van-swipe :autoplay="3000" :show-indicators="false" class="topicList">
        <van-swipe-item v-for="(obj, index) in subjectList" :key="index">
          <img :src="obj.pic" style="height: 200px; width: 100%" />
          <span class="text">{{ obj.title }}</span>
          <span class="price">￥{{ obj.price_info }}</span>
          <div class="brief">{{ obj.description }}</div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { getHomeContent } from "@/api/home";
export default {
  name:'Home',
  data() {
    return {
      advertiseList: [], // 轮播广告
      brandList: [], // 推荐品牌 
      homeFlashPromotion: [], // 当前秒杀场次
      hotProductList: [],  // 人气推荐
      newProductList: [], // 新品推荐
      subjectList: [], // 推荐专题
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 初始化数据
    async initData(){
      let data = await getHomeContent()
      Object.keys(data).forEach(key=>{
        this[key] = data[key]
      })
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  background-color: #fff;
  .banner-img{
    max-height: 280px;
    width: 100%;
  }
  .search-btn {
    width: 100%;
    height: 64px;
    background-color: #ededed;
    color: #666;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
  .menu-img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display:block;
    margin:20px auto 0;
  }
  .brandList {
    .item {
      position: relative;
      .text {
        position: absolute;
        top: 50px;
        left: 30px;
        z-index: 1;
        font-size: 32px;
      }
      .price {
        position: absolute;
        top: 90px;
        left: 30px;
        font-size: 30px;
        color: #999;
        z-index: 1;
      }
    }
  }
  .newGoodsList {
    .item {
      .text {
        font-size: 30px;
      }
      .price {
        font-size: 30px;
        color: red;
      }
    }
  }
  .hotGoodsList {
    .item {
      display: flex;
      .pic {
        float: left;
        height: 300px;
      }
      .textbox {
        padding-top: 60px;
        .text {
          font-size: 32px;
        }
        .brief {
          font-size: 28px;
          color: #666;
        }
        .price {
          font-size: 30px;
          color: red;
        }
      }
    }
  }
  .topicList {
    .text {
      padding-left: 50px;
      font-size: 32px;
    }
    .price {
      font-size: 32px;
      color: red;
    }
    .brief {
      padding-left: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 28px;
      color: #999;
    }
  }
  .goodsfloor {
    border-bottom:1px solid #eee;
    .goods {
      float: left;
      width: 50%;
      height: auto;
      border:1px solid #eee;
      box-sizing: border-box;
      border-bottom-color:#fff;
      &:nth-of-child(2n){
        border-left: none;
      }
      .text {
        font-size: 28px;
        text-align: center;
        margin: 20px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        font-size: 24px;
        text-align: center;
        margin: 20px 0;
        color: red;
      }
    }
  }
}
</style>